<template>
	<view class="template">
		<view class="tags-box">
			<u-tag :text="item.name" v-for="(item, index) in sceneList" :key="index"
			 :bgColor="item.bgColor"
		     :borderColor="item.bgColor" 
			 :color="item.color" 
			 :plain="item.plain || false"
			 @click="clickTag(index)">
		    </u-tag>
		</view>
		<view class="mt20 flex_box flex_between">
			<view class="tags-box">
				<u-tag :text="item.name" v-for="(item, index) in doctypeList" :key="index"
				 :bgColor="item.bgColor"
				 :borderColor="item.bgColor" 
				 :color="item.color" 
				 :plain="item.plain || false"
				 @click="clickDocType(index)">
				</u-tag>
			</view>
			<view class="flex_box choose mt10" @click="isShow = !isShow">
				<text>全部筛选</text><u-icon :name="isShow ? 'arrow-down' : 'arrow-up'"></u-icon>
			</view>
		</view>
		<view class="show-choose mt20" v-if="isShow">
			<view class="u-collapse-content">
				<view>
					<text>场景</text>
					<view class="tags-box">
						<u-tag :text="item.name" v-for="(item, index) in sceneList" :key="index"
						 :bgColor="item.bgColor"
						 :borderColor="item.bgColor" 
						 :color="item.color" 
						 :plain="item.plain || false"
						 size="large"
						 :icon-color="item.bgColor"
						 @click="clickTag(index)">
						</u-tag>
					</view>
				</view>
				<view>
					<text>类型</text>
					<view class="tags-box">
						<u-tag :text="item.name" v-for="(item, index) in doctypeList" :key="index"
						 :bgColor="item.bgColor"
						 :borderColor="item.bgColor" 
						 :color="item.color" 
						 :plain="item.plain || false"
						 size="large"
						 @click="clickDocType(index)">
						</u-tag>
					</view>
				</view>
			</view>
			<view class="flex_box gap20 mt20">
				<u-button type="info" text="重置" @click="reSetBtn"></u-button>
				<u-button color="#1677ff" text="完成" @click="doSearch"></u-button>
			</view>
		</view>
		<view class="mt20 goods-list flex_box gap10">
			<view class="item" v-for="(item, index) in goodsList">
				<view class="image-box">
					<u-image src="/static/test/photo2.png" width="230rpx" height="410rpx"></u-image>
					<text class="goods-type">翻页</text>
				</view>
				<view class="name mt10">宝宝满月酒</view>
				<view class="flex_box flex_between mt10">
					<text class="money">￥19.89</text>
					<text class="tu">13图</text>
				</view>
			</view>
		</view>
		<view class="flex_box flex_center">
			<text class="bottom-tips">— 到底啦 —</text>
		</view>
	</view>
</template>

<script>
	let that;
	export default {
		data() {
			return {
				isShow: false,
				goodsList: [{}],// [{},{}, {}, {}, {},{}, {}, {}, {}],
				sceneList: [
					{
					    "id": 0,
					    "name": "综合",
						bgColor: 'rgba(243, 29, 65, .05)',
					    color:'#f31d41'
					},
                    {
                        "id": 1,
                        "name": "宝宝宴",
						 bgColor: '#fff', 
						 color:'#666'
                    },
                    {
                        "id": 2,
                        "name": "寿宴请帖",
						bgColor: '#fff',
						color:'#666'
                    },
                    {
                        "id": 3,
                        "name": "生日祝福",
						bgColor: '#fff',
						color:'#666'
                    },
                    {
                        "id": 4,
                        "name": "婚礼喜帖",
						bgColor: '#fff',
						color:'#666'
                    },
                    {
                        "id": 5,
                        "name": "乔迁请柬",
						bgColor: '#fff',
						color:'#666'
                    },
                    {
                        "id": 6,
                        "name": "升学宴",
						bgColor: '#fff',
						color:'#666'
                    },
                    {
                        "id": 7,
                        "name": "商务活动",
						bgColor: '#fff',
						color:'#666'
                    }
				],
				doctypeList: [
					{
					    "id": 0,
					    "name": "精选",
						bgColor: 'rgba(243, 29, 65, .05)',
						color:'#f31d41'
					},
					{
					    "id": 1,
					    "name": "翻页",
						bgColor: '#fff',
						color:'#666'
					},
					{
					    "id": 2,
					    "name": "图片",
						bgColor: '#fff',
						color:'#666'
					}
				]
			}
		},
		methods: {
			clickTag: (idx) => {
				that.sceneList.map((item, index) => {
					item.color   = index === idx ? '#f31d41' : '#666';
					item.bgColor = index === idx ? 'rgba(243, 29, 65, .05)' : '#fff';
					item.plain   = index === idx ? true : false;
				})
			},
			clickDocType: (idx) => {
				that.doctypeList.map((item, index) => {
					item.color   = index === idx ? '#f31d41' : '#666';
					item.bgColor = index === idx ? 'rgba(243, 29, 65, .05)' : '#fff';
					item.plain   = index === idx ? true : false;
				})
			},
			reSetBtn: () => {
				that.clickTag(0);
				that.clickDocType(0);
			},
			doSearch: () => {
				console.log('do search')
				that.isShow = false;
			}
		},
		onLoad() {
			that = this;
		},
		onReachBottom() {
			console.log('xx')
			let list = [{},{}];
			that.goodsList = [...that.goodsList, list];
		}
	}
</script>

<style lang="scss">
	.template {
		padding: 0 20rpx;
		.tags-box {
			display: flex;
			gap: 10rpx;
			margin-top: 20rpx;
			overflow: auto;
		}
		.choose {
			font-size: 26rpx;
		}
		.bottom-tips {
			color: #ddd;
			font-size: 28rpx;
		}
		.goods-list {
			flex-wrap: wrap;
			.money {
				font-size: 20rpx;
				color: rgb(211, 157, 6);
				background: rgba(229, 169, 0, 0.24);
				border-radius: 4px;
				padding: 3px;
				text-align: center;
			}
			.image-box {
				position: relative;
				.goods-type {
					font-size: 20rpx;
					position: absolute;
					right: 8rpx;
					bottom: 8rpx;
					background: rgba(0, 0, 0, 0.65);
					color: rgb(255, 255, 255);
					padding: 4rpx 6rpx;
					border-radius: 4rpx;
				}
			}
			.tu {
				font-size: 11px;
				display: inline-block;
				color: rgb(161, 161, 161);
			}
			.name {
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 26rpx;
			}
		}
	}
</style>
